<template>
  <h3>样式绑定 (v-bind用于Class,Style)</h3>

  <div>class属性绑定</div>
  <button @click="isActive = !isActive">切换样式(class)</button>
  <button @click="hasError = !hasError" class="space">改变错误状态</button>
  <span>isActive = {{isActive}}, hasError = {{hasError}}</span>
  <div class="demo" :class="{active: isActive, 'text-error': hasError}">class活动样式切换测试</div>
  <div class="demo" :class="computedClass">测试用计算属性来绑定样式 - 活动且无错误才显示活动样式</div>
  <div class="demo" :class="[activeClass, dangerClass]">数组语法 - 绑定多个样式</div>
  <div class="demo" :class="[isActive ? 'active' : '', hasError ? 'text-error' : '']">使用表达式语法</div>
  <hr>

  <div>style内联样式绑定</div>
  <button @click="changeColor">改变活动颜色</button>
  <button @click="fontSize++" class="space">增大字体</button>
  <button @click="fontSize--" class="space">减小字体</button>
  <div class="demo" :style="{color: activeColor, fontSize: fontSize+'px'}">style内联样式测试</div>
  <button @click="changeStyle" style="margin-top: 5px;">改变样式对象</button>
  <div class="demo" :style="styleObject">直接使用对象来绑定style</div>
  <div class="demo" :style="[baseStyles, moreStyles]">使用数组将多个样式对象应用到一个元素上</div>
  <div class="demo" :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值
    <div class="demo space">Flex</div>
    <div class="demo space">More Texts</div>
    <div class="demo space">再来一个</div>
  </div>
  <hr>

  <p>
    说明:<br>
    1. class 与 style 是 HTML 元素的属性，用于设置元素的样式，在vue中用 v-bind 来设置样式属性。<br>
    2. v-bind 在处理 class 和 style 时， 表达式除了可以使用字符串之外，还可以是对象或数组。<br>
    3. v-bind:class 可以简写为 :class。同理，v-bind:style 也可以简写为 :style。<br>
  </p>
</template>

<script>
import {ref, computed, reactive} from 'vue'

export default {
  setup() {
    let isActive = ref(true)
    let hasError = ref(false)

    let computedClass = computed(()=>{
      return {
        active: isActive.value && !hasError.value,
        'text-error': hasError.value
      }
    })

    function getNextColor(color) {
      if (color === 'blue') {
        return 'green'
      }else if (color === 'green'){
        return 'black'
      }else{
        return 'blue'
      }
    }

    let activeColor = ref('blue')
    let fontSize = ref(14)
    function changeColor() {
      activeColor.value = getNextColor(activeColor.value)
    }

    let styleObject = reactive({
      color: 'red',
      fontSize: '16px'
    })
    let sizeIdx = 16
    function changeStyle(){
      styleObject.color = getNextColor(styleObject.color)
      sizeIdx++
      styleObject.fontSize =  sizeIdx + 'px'
    }
    
    return {
      isActive,
      hasError,
      computedClass,
      activeClass: 'active',
      dangerClass: 'text-error',

      activeColor,
      fontSize,
      changeColor,
      styleObject,
      changeStyle,
      baseStyles: {color: 'sienna', fontSize: '22px'},
      moreStyles: {fontWeight: 'bold'}
    }
  },
}

</script>

<style scoped>

span {
  margin-left: 10px;
}

.space {
  margin-left: 10px;
}

.demo {
  margin-top: 5px;
  border: 1px solid navy;
  padding: 5px;
}

.active {
  font-weight: bold;
  background-color: mistyrose;
}

.text-error {
  color: red;
  font-style: italic;
}

</style>